<template>
  <div class="container app-container">
    <div class="title">船源订单管理</div>

    <!--   搜索表单   -->
    <div class="search-form">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-position="left"
        label-width="100px"
      >
        <el-row>
          <el-form-item label="订单号" prop="orderNo">
            <el-input
              v-model="queryParams.orderNo"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="船舶名称" prop="shipName">
            <el-input
              v-model="queryParams.shipName"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="船舶类型" prop="shipType">
            <el-select
              v-model="queryParams.shipType"
              placeholder="请选择"
              filterable
              :disabled="isOperate"
            >
              <el-option label="全部" value="" />
              <el-option
                :key="item.id"
                :label="item.name"
                :value="item.id"
                v-for="item in shipTypeList"
                filterable
              />
            </el-select>
          </el-form-item>

          <el-form-item label="始发港" prop="originPortName">
            <el-input
              v-model="queryParams.originPortName"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="目的港" prop="destPortName">
            <el-input
              v-model="queryParams.destPortName"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="空船日期" prop="originDate">
            <el-date-picker
              v-model="queryParams.originDate"
              style="width: 220px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="联系人姓名" prop="contacts">
            <el-input
              v-model="queryParams.contacts"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="联系人手机号" prop="contactPhone">
            <el-input
              v-model="queryParams.contactPhone"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="归属企业" prop="companyId">
            <el-select
              v-model="queryParams.companyId"
              placeholder="请选择"
              filterable
              :disabled="isOperate"
            >
              <el-option label="全部" value="" />
              <el-option
                v-for="dict in companyList"
                :key="dict.id"
                :label="dict.companyNickName"
                :value="dict.id"
                filterable
              />
            </el-select>
          </el-form-item>

          <el-form-item label="归属运营商" prop="operateId">
            <el-select
              v-model="queryParams.operatorId"
              placeholder="请选择"
              filterable
              :disabled="isOperate"
            >
              <el-option label="全部" value="" />
              <el-option
                :label="item.deptName"
                :value="item.deptId"
                :key="item.deptId"
                v-for="item in operatorList"
                filterable
              />
            </el-select>
          </el-form-item>

          <el-form-item label="创建人姓名" prop="createName">
            <el-input
              v-model="queryParams.createName"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="创建人手机号" prop="createPhone">
            <el-input
              v-model="queryParams.createPhone"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
              v-model="queryParams.createTime"
              style="width: 220px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>

          <!-- 搜索按钮 -->
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!--   表格头部控件   -->
    <el-row :gutter="10" class="mb8" type="flex" justify="space-between">
      <el-col :span="8">
        <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
          <el-tab-pane label="全部" name=""></el-tab-pane>
          <el-tab-pane label="待审核" name="1"></el-tab-pane>
          <el-tab-pane label="进行中" name="2"></el-tab-pane>
          <el-tab-pane label="已暂停" name="3"></el-tab-pane>
          <el-tab-pane label="已结束" name="4"></el-tab-pane>
          <el-tab-pane label="已取消" name="5"></el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="12">
        <el-col :span="1.5">
          <el-button type="primary" size="mini" @click="add">发布船源订单</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" size="mini" plain @click="handleBatchResumePauseStop(3)"
            >批量暂停</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" size="mini" plain @click="handleBatchResumePauseStop(2)"
            >批量恢复</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" size="mini" plain @click="handleBatchResumePauseStop(5)"
            >批量结束</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" size="mini" plain @click="handleExportExcel"
            >导出EXCEL</el-button
          >
        </el-col>
      </el-col>
    </el-row>

    <!--   表格组件   -->
    <el-table
      border
      style="width: 100%"
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
      :height="tableHeight"
      ref="tableRef"
    >
      <!-- 多选框 -->
      <el-table-column fixed="left" type="selection" width="55"> </el-table-column>

      <!-- 文本展示 -->
      <el-table-column label="订单号" align="center" prop="orderNo" width="150" />

      <el-table-column label="船舶名称" align="center" prop="shipName" width="150">
        <template slot-scope="scope">
          {{ scope.row.shipName ? scope.row.shipName : '--' }}
        </template>
      </el-table-column>

      <el-table-column label="船舶类型" align="center" prop="shipTypeStr" width="150" />

      <el-table-column label="载重吨位（吨）" align="center" prop="shipTonLevel" width="150">
        <template slot-scope="scope">
          {{ scope.row.shipTonLevel ? scope.row.shipTonLevel : '--' }}
        </template>
      </el-table-column>

      <el-table-column label="空船港" align="center" prop="originPortName" width="150">
        <template slot-scope="scope">
          {{ scope.row.originPortName ? scope.row.originPortName : '--' }}
        </template>
      </el-table-column>

      <el-table-column label="目的港" align="center" prop="destPortNames" width="150">
        <template slot-scope="scope">
          {{ scope.row.destPortNames ? scope.row.destPortNames : '--' }}
        </template>
      </el-table-column>

      <el-table-column label="空船日期" align="center" prop="originDate" width="150">
        <template slot-scope="scope">
          {{ scope.row.originDate ? scope.row.originDate : '--' }}
          <span v-if="scope.row.floatingDays > 0" style="color: cornflowerblue"
            >± {{ scope.row.floatingDays }}</span
          >
          <span v-if="scope.row.floatingDays == 0" style="color: cornflowerblue"></span>
        </template>
      </el-table-column>

      <el-table-column label="联系人" align="center" prop="shipTonLevel" width="150">
        <template slot-scope="scope">
          {{ scope.row.contacts }}({{ scope.row.contactPhone }})
        </template>
      </el-table-column>
      <el-table-column label="归属企业" align="center" prop="companyName" width="150" />
      <el-table-column label="归属运营商" align="center" prop="operatorName" width="150" />
      <el-table-column label="创建方式" align="center" prop="createType" width="150">
        <template slot-scope="scope">
          {{ scope.row.createType == 1 ? '运营创建' : '用户自建' }}
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="createName" width="150">
        <template slot-scope="scope">
          {{ scope.row.createName }}({{ scope.row.createPhone }})
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="150" />
      <el-table-column label="状态" align="center" prop="stateStr" width="150">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.state == 1">{{
            scope.row.stateStr | stateStr
          }}</el-tag>
          <el-tag v-if="scope.row.state == 2">{{ scope.row.stateStr | stateStr }}</el-tag>
          <el-tag type="warning" v-if="scope.row.state == 3">{{
            scope.row.stateStr | stateStr
          }}</el-tag>
          <el-tag style="color: #dee2e6" color="rgba(0,0,0,0.4)" v-if="scope.row.state == 4">{{
            scope.row.stateStr | stateStr
          }}</el-tag>
          <el-tag type="info" v-if="scope.row.state == 5">{{
            scope.row.stateStr | stateStr
          }}</el-tag>
        </template>
      </el-table-column>

      <!-- 操作区 -->
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
      >
        <template slot-scope="scope">
          <!-- v-hasPermi="['library:course:edit']" -->
          <el-button size="mini" type="text" @click="lookDetail(scope.row)">查看详情</el-button>
          <el-button size="mini" type="text" @click="edit(scope.row)">编辑</el-button>
          <!--<el-button size="mini" type="text" @click="startOrStop(scope.row)">
            <div :class="scope.row.state == 2 ? 'disable' : 'normal'" class="status">
              {{ ['禁用', '恢复'][scope.row.state] }}
            </div>
          </el-button>-->
          <el-button
            size="mini"
            type="text"
            style="color: #fd7900"
            v-if="scope.row.state == 2"
            @click="startOrStop(scope.row, 3)"
            >暂停</el-button
          >
          <el-button
            size="mini"
            type="text"
            style="color: #fd7900"
            v-if="scope.row.state == 3"
            @click="startOrStop(scope.row, 2)"
            >恢复</el-button
          >
          <el-button
            size="mini"
            type="text"
            style="color: red"
            v-if="scope.row.state == 2 || scope.row.state == 3"
            @click="startOrStop(scope.row, 4)"
            >结束</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--   分页组件   -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
      ref="pageHeight"
    />
  </div>
</template>
<script>
import { batchUpdateStatus, getList } from '@/api/orders/orderShip';
import { getOperateList, getCompanyList } from '@/api/common/index';
import dayjs from 'dayjs';

export default {
  components: {},
  // dicts: ['jazx_clientcompany_enablestatus', 'jazx_company_check_status'],
  // 变量区
  data: () => ({
    // 选中数组
    ids: [],
    showSearch: true,
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      orderNo: null,
      shipName: null,
      shipType: null,
      originDate: null,
      originPortName: null,
      destPortName: null,
      contacts: null,
      contactPhone: null,
      companyId: null,
      operatorId: null,
      createType: null,
      createPhone: null,
      createName: null,
      createTime: null,
    },
    isOpenAddCompanyModal: false,
    loading: false,
    //table 高度
    tableHeight: null,
    //分页器高度
    pageHeight: null,
    // 总条数
    total: 1,
    // 列表数据
    list: [],
    operatorList: [],
    companyList: [],
    shipDataList: [],
    shipTypeList: [
      {
        id: 1,
        name: '普通货船',
      },
      {
        id: 2,
        name: '集装箱船',
      },
      {
        id: 3,
        name: '滚装船',
      },
      {
        id: 4,
        name: '载驳货船',
      },
      {
        id: 5,
        name: '散货船',
      },
      {
        id: 6,
        name: '兼用船',
      },
      {
        id: 7,
        name: '自卸船',
      },
      {
        id: 8,
        name: '多用途船',
      },
      {
        id: 9,
        name: '干货船',
      },
      {
        id: 10,
        name: '平板船',
      },
      {
        id: 11,
        name: '挖泥船',
      },
      {
        id: 12,
        name: '泥驳船',
      },
      {
        id: 13,
        name: '起重船',
      },
      {
        id: 14,
        name: '打桩船',
      },
      {
        id: 15,
        name: '混泥土搅拌船',
      },
      {
        id: 16,
        name: '垃圾船',
      },
      {
        id: 99,
        name: '其他',
      },
    ],
  }),
  // 页面加载后默认执行的方法
  async mounted() {
    this.queryParams.operateId = this.isOperate ? this.$store.getters.operateId : null;

    // 执行列表刷新
    this.handleQuery();
    this.handleCompanyQuery();
    this.handleOperatorQuery();

    this.tableHeight =
      window.innerHeight -
      this.$refs.tableRef.$el.getBoundingClientRect().top -
      this.$refs.pageHeight.$el.clientHeight -
      60;
  },
  computed: {
    isOperate() {
      return (
        this.$store.getters.roles.includes('yys_super_admin') ||
        this.$store.getters.roles.includes('yys_admin') ||
        this.$store.getters.roles.includes('yys_js') ||
        this.$store.getters.roles.includes('yys_yyry')
      );
    },
    operateList() {
      return this.deptList.operateList;
    },
    channelList() {
      return this.deptList.channelList;
    },
  },
  methods: {
    dayjs,
    tabClick(tab) {
      this.queryParams.state = this.activeName;
      this.getList();
    },
    // 获取企业
    handleCompanyQuery() {
      getCompanyList().then((res) => {
        this.companyList = res.data;
      });
    },
    // 获取运营商
    handleOperatorQuery() {
      getOperateList().then((res) => {
        this.operatorList = res.data.operateList;
      });
    },
    // 列表查询
    handleQuery() {
      this.getList();
    },
    // 重置查询
    resetQuery() {
      this.queryParams = {
        ...this.queryParams,
        companyName: null,
        creditCode: null,
        operateId: null,
        city: null,
        channelId: null,
        superAdminName: null,
        superAdminPhone: null,
        recentlyMouthStudy: null,
        orderNo: null,
        shipName: null,
        shipType: null,
        originDate: null,
        originPortName: null,
        destPortName: null,
        contacts: null,
        contactPhone: null,
        companyId: null,
        createType: null,
        createPhone: null,
        createName: null,
        createTime: null,
      };
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    // 请求列表数据
    getList() {
      this.loading = true;
      let query = {
        ...this.queryParams,
        createTimeStart: this.queryParams.createTime?.[0]
          ? this.queryParams.createTime[0] + ' 00:00:00'
          : null,
        createTimeEnd: this.queryParams.createTime?.[0]
          ? this.queryParams.createTime[1] + ' 23:59:59'
          : null,
      };

      delete query.createTime;
      delete query.pageNum;
      delete query.pageSize;
      getList(query, {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      })
        .then((res) => {
          this.list = res.data;
          // this.customerList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 跳转详情
    lookDetail(row) {
      this.$router.push({ name: 'OrdersShipDetail', query: { id: row.id } });
    },
    // 跳转新增页
    add() {
      this.$router.push({ name: 'OrdersShipSave' });
    },
    // 跳转编辑页
    edit(row) {
      this.$router.push({ name: 'OrdersShipSave', query: { id: row.id } });
    },
    // 启用/停用
    startOrStop(row, state) {
      let textTip = ['', '待审核', '恢复', '暂停', '结束', '取消'][state];
      this.$confirm(`是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        batchUpdateStatus({
          ids: row.id,
          state,
        }).then(() => {
          this.$message.success(`${['', '待审核', '恢复', '暂停', '结束', '取消'][state]}成功`);
          this.getList();
        });
      });
    },
    // 批量回复/暂停/停用
    handleBatchResumePauseStop(state) {
      if (!this.ids.length) {
        this.$message.error('请至少选择一项');
      } else {
        this.$confirm(`已选${this.ids.length}个， 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          batchUpdateStatus({
            ids: this.ids.join(','),
            state,
          }).then(() => {
            this.$message.success('操作成功');
            this.getList();
          });
        });
      }
    },
    // 导出excel
    handleExportExcel() {
      this.download(
        '/orderShip/export',
        {
          ...this.queryParams,
          clientIds: this.ids[0] ? this.ids.join(',') : null,
        },
        '船源订单列表.xlsx',
      ).then(() => {
        this.$message.success('导出成功');
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
  font-size: 13px;
}

.status {
  &.normal {
    color: #ffa14b;
  }

  &.disable {
    color: red;
  }
}

.title {
  margin-bottom: 20px;
}
</style>
